import { onMounted, reactive } from "vue"
import axios from "axios"

//https://dog.ceo/api/breed/pembroke/images/random

export default function () {
  let dogList = reactive([
    "https://images.dog.ceo/breeds/pembroke/n02113023_9621.jpg",
  ])

  async function next() {
    try {
      let result = await axios.get(
        "https://dog.ceo/api/breed/pembroke/images/random"
      )
      dogList.push(result.data.message)
    } catch (error) {
      alert(error)
    }
  }

  onMounted(() => {
    next()
  })

  return {
    dogList,
    next,
  }
}
